<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>滴答办公系统-学员列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
	<link type="text/css" rel="stylesheet" href="/media/toastr/toastr.min.css">
	<script src="/media/js/jquery.min.js"></script>
	<script type="text/javascript" src="/media/toastr/toastr.min.js"></script>
</head>
<body>
<div class="layui-container">
	<div class="layui-row" style="margin-top: 10px">
		<div class="layui-col-xs3" style="margin-right: 20px">
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">姓名：</label>
				<div class="layui-input-block">
					<input type="text" id="no" class="layui-input" placeholder="学生姓名">
				</div>
			</div>
		</div>
		<div class="layui-col-xs3" style="margin-right: 20px">
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">班级：</label>
				<div class="layui-input-block">
					<select class="layui-input" id="fg">
						<option value="0">所有班级</option>
					</select>
				</div>
			</div>
		</div>
		<div class="layui-col-xs2">
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" onclick="searchData()"><i class="layui-icon layui-icon-search" id="seachbt">搜索</i></button>
				</div>
			</div>
		</div>
		<div class="layui-col-xs2">
			<div class="layui-form-item">
				<div class="layui-input-block">
					<a class="layui-btn layui-btn-mini layui-btn-mini"  lay-event="detail" id="excelbt">导出Excel</a>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="layui-container">
	<table class="layui-table" id="tbdata" lay-filter="tbop">
		<thead>
		<tr>
			<td>学号</td>
			<td>姓名</td>
			<td>班级</td>
			<td>性别</td>
			<td>手机号</td>
			<td>邮箱</td>
			<td>操作</td>
		</tr>
		</thead>
		<tbody id="tbody">

		</tbody>
	</table>
	<div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
		<a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">
			<i class="layui-icon">&lt;</i>
		</a>
		<span style="color:#009688;font-weight: bold;">1</span>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<a href="javascript:;" class="layui-laypage-next layui-disabled" data-page="2">
			<i class="layui-icon">&gt;</i>
		</a>
		<span class="layui-laypage-skip">到第
							   <input type="text" min="1" value="1" class="layui-input">页
								<button type="button" class="layui-laypage-btn">确定</button>
							</span>
		<span class="layui-laypage-count">共 1 条</span>
		<span class="layui-laypage-limits">
							    <select lay-ignore="">
							        <option value="10" selected="">10 条/页</option>
									<option value="20">20 条/页</option>
									<option value="30">30 条/页</option>
									<option value="40">40 条/页</option>
									<option value="50">50 条/页</option>
									<option value="60">60 条/页</option>
									<option value="70">70 条/页</option>
									<option value="80">80 条/页</option>
									<option value="90">90 条/页</option>
							</select>
							</span>
	</div>
</div>

<script src="media/layui/layui.js"></script>

<script type="text/javascript">
	function deleteStudent(id){
		layui.use('table', function() {
			layer.confirm('是否确认删除学生?',function(index) {

				$.ajax({
					url:"/deleteStudent",
					data:{id:id},
					success:function (data) {
						var d = JSON.parse(data)
						if (d.code==100){
							layer.msg("删除成功", {icon : 6});
							setTimeout(function(){
								location.reload();
							},1000)
						}else{
							layer.msg("删除失败", {icon : 5});
						}
					}
				})
			});
		});
	}
	function queryStudent(){
		var name = $("#no").val();
		var classId = $("#fg").val();
		$.ajax({
			url:"/queryStudent",
			data:{name:name,classId:classId},
			datatype:"json",
			success:function (data) {
				$("#tbody tr").remove();
				var students = JSON.parse(data);
				for (var i =0;i<students.length;i++){
					var s = students[i];

					$("#tbody").append("<tr>\n" +
							"\t\t\t<td>"+s.id+"</td>\n" +
							"\t\t\t<td>"+s.name+"</td>\n" +
							"\t\t\t<td>"+s.cname+"</td>\n" +
							"\t\t\t<td>"+s.sex+"</td>\n" +
							"\t\t\t<td>"+s.phone+"</td>\n" +
							"\t\t\t<td>"+s.email+"</td>\n" +
							"\t\t\t<td><a class=\"layui-btn layui-btn-mini\" href=\"studentupdate.html?id="+s.id+"\">编辑</a>\n" +
							"\t\t\t\t<a class=\"layui-btn layui-btn-mini layui-btn-mini\" href=\"studentdetails.html?id="+s.id+"\" lay-event=\"detail\">查看详情</a>\n" +
							"\t\t\t\t<a class=\"layui-btn layui-btn-danger layui-btn-mini\"\n" +
							"\t\t\t\t   lay-event=\"del\" onclick=\"deleteStudent("+s.id+");\">删除</a>\n" +
							"\t\t\t</td>\n" +
							"\t\t</tr>")

				}

			}
		})

	}
	$(function () {
		queryStudent();

		$.ajax({
			url:"/getClassName",
			success:function (data) {
				var a = JSON.parse(data)
				for (var i =0;i<a.length;i++){
					var c = a[i];
					$("#fg").append("<option value=\""+c.id+"\">"+c.className+"</option>")
				}
			}
		})

		$("#seachbt").click(function () {
			queryStudent();
		})

		$("#excelbt").click(function () {
			var name = $("#no").val();
			var classId = $("#fg").val();

			$.ajax({
				url:"/studentexcel",
				data:{name:name,classId:classId},
                success:function () {
                    window.open('/studentexcel?name='+name+'&classId='+classId,'_self');
                }
			})

		})
	})

</script>

</body>
</html>